<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>胶水房生产 - 胶水管理系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="header">
            <div class="logo">
                <i class="fas fa-tint"></i>
                <span>胶水管理系统</span>
            </div>
            <nav class="nav">
                <a href="apply.html" class="nav-item">
                    <i class="fas fa-clipboard-list"></i>
                    <span>胶水申请</span>
                </a>
                <a href="production.html" class="nav-item active">
                    <i class="fas fa-industry"></i>
                    <span>胶水房管理</span>
                </a>
                <a href="usage.html" class="nav-item">
                    <i class="fas fa-tools"></i>
                    <span>产线使用</span>
                </a>
                <a href="recycle.html" class="nav-item">
                    <i class="fas fa-recycle"></i>
                    <span>胶水回收</span>
                </a>
            </nav>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 页面标题 -->
            <div class="table-header">
                <h1><i class="fas fa-industry"></i> 胶水房管理</h1>
                <p>处理胶水申请配送，监控各产线胶水使用状态</p>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-container">
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">12</div>
                        <div class="stat-label">待处理申请</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-truck"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">8</div>
                        <div class="stat-label">待配送确认</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">3</div>
                        <div class="stat-label">即将过期</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-times-circle"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">2</div>
                        <div class="stat-label">已过期</div>
                    </div>
                </div>
            </div>

            <!-- 待处理申请看板 -->
            <div class="table-container">
                <div class="table-header">
                    <h3><i class="fas fa-clock"></i> 待处理申请看板</h3>
                    <p>关注配送状态，确认配送即可</p>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>申请编号</th>
                            <th>工单号</th>
                            <th>产线</th>
                            <th>工位</th>
                            <th>胶水品类</th>
                            <th>胶水规格</th>
                            <th>申请数量</th>
                            <th>用胶时间</th>
                            <th>申请时间</th>
                            <th>配送状态</th>
                            <th>时效状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>AP-2024-001</td>
                            <td>WO-2024-001</td>
                            <td>产线A</td>
                            <td>插芯注胶</td>
                            <td>环氧树脂胶</td>
                            <td>整支</td>
                            <td>2</td>
                            <td>2024-01-15 14:30</td>
                            <td>2024-01-15 09:00</td>
                            <td><span class="status-badge status-pending">待配送</span></td>
                            <td><span class="status-badge status-normal">正常</span></td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="confirmDelivery('AP-2024-001')">
                                    <i class="fas fa-truck"></i> 确认配送
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>AP-2024-002</td>
                            <td>WO-2024-002</td>
                            <td>产线B</td>
                            <td>穿纤注胶</td>
                            <td>UV胶</td>
                            <td>1/2支</td>
                            <td>1</td>
                            <td>2024-01-15 16:00</td>
                            <td>2024-01-15 10:30</td>
                            <td><span class="status-badge status-pending">待配送</span></td>
                            <td><span class="status-badge status-normal">正常</span></td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="confirmDelivery('AP-2024-002')">
                                    <i class="fas fa-truck"></i> 确认配送
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>AP-2024-003</td>
                            <td>WO-2024-003</td>
                            <td>产线C</td>
                            <td>固化</td>
                            <td>硅胶</td>
                            <td>1/3支</td>
                            <td>3</td>
                            <td>2024-01-14 15:00</td>
                            <td>2024-01-14 08:00</td>
                            <td><span class="status-badge status-delivered">已配送</span></td>
                            <td><span class="status-badge status-expired">超时</span></td>
                            <td>
                                <button class="btn btn-success btn-sm" onclick="viewDeliveryDetails('AP-2024-003')">
                                    <i class="fas fa-eye"></i> 查看详情
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>AP-2024-004</td>
                            <td>WO-2024-004</td>
                            <td>产线D</td>
                            <td>测试</td>
                            <td>环氧树脂胶</td>
                            <td>整支</td>
                            <td>1</td>
                            <td>2024-01-15 17:00</td>
                            <td>2024-01-15 14:00</td>
                            <td><span class="status-badge status-pending">待配送</span></td>
                            <td><span class="status-badge status-normal">正常</span></td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="confirmDelivery('AP-2024-004')">
                                    <i class="fas fa-truck"></i> 确认配送
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 使用胶水监控列表 -->
            <div class="table-container">
                <div class="table-header">
                    <h3><i class="fas fa-eye"></i> 使用胶水监控列表</h3>
                    <p>监控各产线胶水使用状态和过期情况</p>
                </div>
                
                <!-- 筛选器 -->
                <div class="filter-container" style="padding: 16px 24px; background: #f8f9fa;">
                    <div class="filter-item">
                        <label>产线：</label>
                        <select id="productionLineFilter">
                            <option value="">全部产线</option>
                            <option value="A">产线A</option>
                            <option value="B">产线B</option>
                            <option value="C">产线C</option>
                            <option value="D">产线D</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>工位：</label>
                        <select id="workstationFilter">
                            <option value="">全部工位</option>
                            <option value="插芯注胶">插芯注胶</option>
                            <option value="穿纤注胶">穿纤注胶</option>
                            <option value="固化">固化</option>
                            <option value="测试">测试</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>状态：</label>
                        <select id="statusFilter">
                            <option value="">全部状态</option>
                            <option value="normal">正常</option>
                            <option value="warning">即将过期</option>
                            <option value="expired">已过期</option>
                        </select>
                    </div>
                </div>
                
                <table>
                    <thead>
                        <tr>
                            <th>产线</th>
                            <th>工位</th>
                            <th>胶水ID</th>
                            <th>胶水品类</th>
                            <th>胶水品号</th>
                            <th>剩余量</th>
                            <th>生产日期</th>
                            <th>过期时间</th>
                            <th>剩余时间</th>
                            <th>使用状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>产线A</td>
                            <td>插芯注胶</td>
                            <td>GL-2024-001</td>
                            <td>环氧树脂胶</td>
                            <td>EP-001</td>
                            <td>80%</td>
                            <td>2024-01-15 14:30</td>
                            <td>2024-01-15 16:30</td>
                            <td><span style="color: #dc3545; font-weight: bold;">15分钟</span></td>
                            <td><span class="status-badge status-expired">即将过期</span></td>
                            <td>
                                <button class="btn btn-warning btn-sm" onclick="urgentRecycle('GL-2024-001')">
                                    <i class="fas fa-exclamation"></i> 紧急回收
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>产线B</td>
                            <td>穿纤注胶</td>
                            <td>GL-2024-002</td>
                            <td>UV胶</td>
                            <td>UV-001</td>
                            <td>60%</td>
                            <td>2024-01-15 13:45</td>
                            <td>2024-01-15 15:45</td>
                            <td><span style="color: #dc3545; font-weight: bold;">已过期</span></td>
                            <td><span class="status-badge status-expired">已过期</span></td>
                            <td>
                                <button class="btn btn-danger btn-sm" onclick="urgentRecycle('GL-2024-002')">
                                    <i class="fas fa-times"></i> 立即回收
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>产线C</td>
                            <td>固化</td>
                            <td>GL-2024-003</td>
                            <td>硅胶</td>
                            <td>SI-001</td>
                            <td>90%</td>
                            <td>2024-01-15 12:00</td>
                            <td>2024-01-15 14:00</td>
                            <td><span style="color: #28a745; font-weight: bold;">45分钟</span></td>
                            <td><span class="status-badge status-normal">正常</span></td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="scheduleRecycle('GL-2024-003')">
                                    <i class="fas fa-calendar"></i> 安排回收
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>产线D</td>
                            <td>测试</td>
                            <td>GL-2024-004</td>
                            <td>环氧树脂胶</td>
                            <td>EP-002</td>
                            <td>75%</td>
                            <td>2024-01-15 11:30</td>
                            <td>2024-01-15 13:30</td>
                            <td><span style="color: #28a745; font-weight: bold;">75分钟</span></td>
                            <td><span class="status-badge status-normal">正常</span></td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="scheduleRecycle('GL-2024-004')">
                                    <i class="fas fa-calendar"></i> 安排回收
                                </td>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 胶水过期提醒 -->
            <div class="table-container">
                <div class="table-header">
                    <h3><i class="fas fa-exclamation-triangle"></i> 胶水过期提醒</h3>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>胶水ID</th>
                            <th>胶水品类</th>
                            <th>胶水品号</th>
                            <th>生产日期</th>
                            <th>过期时间</th>
                            <th>剩余时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>GL-2024-001</td>
                            <td>环氧树脂胶</td>
                            <td>EP-001</td>
                            <td>2024-01-01</td>
                            <td>2024-01-16</td>
                            <td><span style="color: #dc3545; font-weight: bold;">1天</span></td>
                            <td><span class="status-badge status-expired">即将过期</span></td>
                            <td>
                                <button class="btn btn-warning btn-sm" onclick="urgentRecycle('GL-2024-001')">
                                    <i class="fas fa-exclamation"></i> 紧急回收
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>GL-2024-002</td>
                            <td>UV胶</td>
                            <td>UV-001</td>
                            <td>2024-01-01</td>
                            <td>2024-01-15</td>
                            <td><span style="color: #dc3545; font-weight: bold;">已过期</span></td>
                            <td><span class="status-badge status-expired">已过期</span></td>
                            <td>
                                <button class="btn btn-danger btn-sm" onclick="urgentRecycle('GL-2024-002')">
                                    <i class="fas fa-times"></i> 立即回收
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>GL-2024-003</td>
                            <td>硅胶</td>
                            <td>SI-001</td>
                            <td>2024-01-05</td>
                            <td>2024-01-20</td>
                            <td><span style="color: #ffc107; font-weight: bold;">5天</span></td>
                            <td><span class="status-badge status-normal">正常</span></td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="scheduleRecycle('GL-2024-003')">
                                    <i class="fas fa-calendar"></i> 安排回收
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </main>
    </div>

    <script src="scripts/main.js"></script>
    <script>
        // 确认配送
        function confirmDelivery(applyId) {
            if (confirm('确认配送申请 ' + applyId + ' 的胶水？')) {
                // 这里可以添加实际的配送确认逻辑
                alert('配送已确认！');
                // 更新状态显示
                const row = event.target.closest('tr');
                const statusCell = row.querySelector('td:nth-child(10)');
                statusCell.innerHTML = '<span class="status-badge status-delivered">已配送</span>';
                
                const actionCell = row.querySelector('td:nth-child(11)');
                actionCell.innerHTML = `
                    <button class="btn btn-success btn-sm" onclick="viewDeliveryDetails('${applyId}')">
                        <i class="fas fa-eye"></i> 查看详情
                    </button>
                `;
            }
        }

        // 查看配送详情
        function viewDeliveryDetails(applyId) {
            alert(`查看申请 ${applyId} 的配送详情`);
            // 这里可以添加实际的查看详情逻辑
        }

        // 紧急配送
        function urgentDelivery(applyId) {
            if (confirm('确认紧急配送申请 ' + applyId + ' 的胶水？')) {
                alert('紧急配送已安排！');
                // 这里可以添加实际的紧急配送逻辑
            }
        }

        // 紧急回收
        function urgentRecycle(glueId) {
            if (confirm('确认紧急回收胶水 ' + glueId + '？')) {
                alert('紧急回收已安排！');
                // 这里可以添加实际的紧急回收逻辑
            }
        }

        // 安排回收
        function scheduleRecycle(glueId) {
            if (confirm('确认为胶水 ' + glueId + ' 安排回收？')) {
                alert('回收已安排！');
                // 这里可以添加实际的安排回收逻辑
            }
        }

        // 完成配送
        function completeDelivery(applyId) {
            if (confirm('确认完成配送申请 ' + applyId + ' 的胶水？')) {
                alert('配送已完成！');
                // 这里可以添加实际的完成配送逻辑
            }
        }

        // 页面加载时更新统计数字
        document.addEventListener('DOMContentLoaded', function() {
            // 这里可以添加实际的统计数据获取逻辑
            console.log('胶水房生产页面加载完成');
        });
    </script>
</body>
</html>
